<template>
    <el-row class="tradingStatistics">
        <el-col :span="6" class="tradingStatisticsItem" v-for="(item, index) in dataList" :key="index">
            <p>{{ item.title }}</p>
            <p>{{ item.value }}</p>
        </el-col>
    </el-row>
</template>
<script>
export default {
    data() {
        return {
            dataList: []
        }

    },
    mounted() {
        let infoData = JSON.parse(localStorage.getItem('info'));
        this.dataList = [
            { title: '总交易（笔数）', value: infoData.volume },
            { title: '盈利交易（笔数）', value: infoData.profitVolume },
            { title: '亏损交易', value: infoData.lossVolume },
            { title: '利润因子', value: infoData.profitVolume },
            { title: '最大盈利', value: infoData.profitMax },
            { title: '最大亏损', value: infoData.lossMax },
            { title: '预期回报', value: infoData.profitVolume },
            { title: '最大盈亏比', value: infoData.profitVolume },
            { title: '最大连续盈利金额', value: infoData.profitContinuous },
            { title: '最大连续盈利笔数', value: infoData.profitContinuousVolume },
            { title: '最大连续亏损金额', value: infoData.lossContinuous },
            { title: '最大连续亏损笔数', value: infoData.lossContinuousVolume },
            { title: '总盈利', value: infoData.profitSum },
            { title: '总亏损', value: infoData.lossSum },
            { title: '平均盈利', value: infoData.profitAverage },
            { title: '平均亏损', value: infoData.lossAverage }
        ]
        console.log(this.dataList)

    }
}
</script>
<style lang="scss" scoped>
.tradingStatistics {
    .tradingStatisticsItem {
        padding: 15px 0;
        margin-bottom: 10px;

        p {
            text-align: center;
            font-size: 16 px;

            &:first-child {
                margin-bottom: 5px
            }
        }

        &:not(:last-child) {
            border-right: 1px dashed gray;
        }

        &:nth-child(13),
        &:nth-child(15) {
            p {
                &:last-child {
                    color: blue;
                }
            }
        }

        &:nth-child(14),
        &:nth-child(16) {
            p {
                &:last-child {
                    color: red;
                }
            }
        }
    }
}
</style>